import { getTopOccupiedHeight } from "@/utils/globalAppDataUtil";

Page<
  {
    /**
     * 当前页面中用到的css变量
     */
    displayCssVar: string;
    /**
     * 自定义顶部导航显示样式
     */
    customNavigationBarDisplayStyle: string;
    /**
     * 分割面板是否使用fixed布局. 默认:false
     */
    splitPanelFixed: boolean;
    /**
     * 当前激活的标签名称
     */
    activeTabName: string;
    /**
     * 最外层滚动容器的scrollTop标志, 当scrollTop大于等于该标识值时, classifyScrollViewFixed 应该设置为true, 否则为false
     */
    pageScrollTopFlag: number;
    /**
     * 页面滚动距离
     */
    pageScrollTop: number;
    /**
     * 顶部导航加分割面板高度
     */
    topNavSplitPanelHeight: number;
    /**
     * 分类面板使用fixed定位之后, 应该设置的top值
     */
    classifyFixedTop: number;
  },
  {
    /**
     * 页面初始化
     */
    pageInit: () => void;
    buildCustomNavigationBarDisplayStyle: (_splitPanelFixed: boolean) => string;
    onTabChange: (e: WechatMiniprogram.CustomEvent) => void;
    tabAContentScroll: (scrollTop: number) => void;
  }
>({
  /**
   * 页面的初始数据
   */
  data: {
    pageScrollTopFlag: 0,
    splitPanelFixed: false,
    customNavigationBarDisplayStyle:
      "--nav-bar-background-color:rgba(255,255,255,0);",
    displayCssVar: "",
    activeTabName: "tab-a",
    pageScrollTop: 0,
    topNavSplitPanelHeight: 0,
    classifyFixedTop: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.nextTick(() => {
      this.pageInit();
    });
  },

  pageInit() {
    /**
     * 顶部导航占用高度
     */
    const topOccupiedHeight = getTopOccupiedHeight();
    wx.createSelectorQuery()
      .selectAll(".top-content, .split-panel-wrapper")
      .boundingClientRect((rects) => {
        const rectArr =
          rects as unknown as WechatMiniprogram.BoundingClientRectCallbackResult[];
        const topContentHeight = rectArr[0].height;
        const pageScrollTopFlag = topContentHeight;
        /**
         * 分割面板高度
         */
        const splitPanelWrapperHeight = rectArr[1].height;
        /**
         * 分类面板使用fixed定位之后, 应该设置的top值
         */
        const classifyFixedTop = topOccupiedHeight + splitPanelWrapperHeight;
        /**
         * 顶部导航加分割面板高度
         */
        const topNavSplitPanelHeight =
          topOccupiedHeight + splitPanelWrapperHeight;
        let displayCssVar = "";
        displayCssVar += `--topNavHeight:${topOccupiedHeight}px;`;
        displayCssVar += `--splitPanelFixedTop:${topOccupiedHeight}px;`;

        this.setData({
          displayCssVar,
          pageScrollTopFlag,
          topNavSplitPanelHeight,
          classifyFixedTop,
        });
      })
      .exec();
  },

  buildCustomNavigationBarDisplayStyle(_splitPanelFixed: boolean) {
    const customNavigationBarDisplayStyle = _splitPanelFixed
      ? "--nav-bar-background-color:rgb(255,255,255);"
      : "--nav-bar-background-color:rgba(255,255,255,0);";
    return customNavigationBarDisplayStyle;
  },

  tabAContentScroll(scrollTop: number) {
    if (scrollTop <= 0 || scrollTop < this.data.pageScrollTopFlag) {
      const customNavigationBarDisplayStyle =
        this.buildCustomNavigationBarDisplayStyle(false);
      this.setData({
        splitPanelFixed: false,
        customNavigationBarDisplayStyle,
        pageScrollTop: scrollTop,
      });
    } else {
      const customNavigationBarDisplayStyle =
        this.buildCustomNavigationBarDisplayStyle(true);
      this.setData({
        splitPanelFixed: true,
        customNavigationBarDisplayStyle,
        pageScrollTop: scrollTop,
      });
    }
  },
  onPageScroll(e: WechatMiniprogram.Page.IPageScrollOption) {
    const { scrollTop } = e;
    if (this.data.activeTabName === "tab-a") {
      this.tabAContentScroll(scrollTop);
    }
  },

  onTabChange(e: WechatMiniprogram.CustomEvent) {
    const activeTabName = e.detail.name;
    this.setData({ activeTabName }, () => {
      if (this.data.activeTabName === "tab-a") {
        wx.pageScrollTo({
          scrollTop: this.data.pageScrollTop,
          duration: 0,
        });
      } else {
        this.setData({
          splitPanelFixed: false,
        });
        wx.pageScrollTo({
          scrollTop: this.data.pageScrollTop,
          duration: 0,
        });
      }
    });
  },
});
